<template>
  <div id="fu">
    <div id="desc">
      <i class="el-icon-paperclip"></i>
      <span>学生课程</span>
    </div>

    <div class="contine">
      <!-- 表格内容 -->
      <el-row>
        <el-col :span="24">
          <el-table
            :data="tableData"
            stripe
            style="width: 100%">
            <el-table-column
              prop="courseId"
              label="选课Id"
              width="180">
            </el-table-column>
            <el-table-column
              prop="courseName"
              label="课程名"
              width="180">
            </el-table-column>
            <el-table-column
              prop="teacherName"
              label="教师">
            </el-table-column>
            <el-table-column
              prop="courseCredit"
              label="学分">
            </el-table-column>
            <el-table-column
              prop="scDailyScore"
              label="日常成绩">
            </el-table-column>
            <el-table-column
              prop="scExamScore"
              label="考试成绩">
            </el-table-column>
            <el-table-column
              prop="scScore"
              label="总成绩">
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  type="danger"
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)">退选
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </div>

  </div>
</template>

<script>
import {get} from "../../common/request";

export default {
  name: "StudentCourse",
  data() {
    return {
      tableData: []
    }
  },
  methods: {
    handleEdit(index, row) {
      //console.log(index, row)
      get("/student-course/unselect-course/" + row.courseId).then(x => {
        //console.log(x);
        if (x.code === 1) {
          this.$message.success(x.msg)
          this.getData();
        } else {
          this.$message.error(x.msg)
        }
      })
    },

    getData() {
      get("/student-course/get-student-course").then(x => {
        //console.log(x.data);
        this.tableData = x.data;
      })
    }
  },
  mounted() {
    this.getData();
  }
}
</script>

<style scoped>
#fu {
  padding: 0 15px;
  background-color: rgb(240, 240, 240);
}

#desc {
  font-size: 14px;
  padding: 15px 0;
}

.contine {
  background-color: white;
  border-radius: 3px;
  border: 1px solid lightgray;
  padding: 10px 30px;
}
</style>
